<template>
  <div id="app">
    <my-header>{{headerTitle}}</my-header>
    <search-input
    :placeholder="placeholder"
    :maxlength="maxlength"/>
    <tab/>

      <router-view v-slot="{ Component}">
         <keep-alive>
           <component :is="Component"/>
         </keep-alive>
       </router-view>
  </div>

</template>

<script>
//组件
import MyHeader from '@/components/Header';
import Tab from '@/components/Tab';
import SearchInput from '@/components/SearchInput' ;


//
import {computed, watch } from 'vue';
import {useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default {
  name: 'App',
  components:{
    MyHeader,
    Tab,
    SearchInput
  },
  setup(){
    const store = useStore(),
          state = store.state,
          router = useRouter();
      router.push('/');
      // store.commit('')
      // console.log( router );
      // console.log(state);


  watch(()=>{
    // console.log(router.currentRoute.value.name);
  return router.currentRoute.value.name;
 
  },(value)=>{
    store.commit('setHeaderTitle',value);
    store.commit("setPlacecholder",value);
    store.commit('setMaxlength', value);
    store.commit('setField', value);
    store.commit('setErrorCode', 0);

  })
  //取到的值就是headerTitle 刷新路由改了  
  return computed(()=>state).value;
  
  
  }
  
}
  
</script>




